<template>
	<view class="container">
		<view :style="{height:this.show?'320rpx':''}">
			<diy-nav title="搜索"></diy-nav>
			<Search :showFilter="false"  ref="searchBarRef" @cancelSearch="cancelSearch"  @confirm1="doConfirm()"></Search>
			<view v-if="!show" class="s_stitle" style="margin-bottom: 24rpx;">搜索结果（{{total}}个）</view>
		</view>
		<view v-if="show">
			<view class="s_history">
				<view class="s_stitle">搜索历史</view>
				<view class="s_sicon">
					<text @click="clickRemove()" class="cell-icon yticon icon-iconfontshanchu1" style="font-size: 36rpx;"></text>
				</view>
			</view>
			<view class="s_s_content">
				<view v-for="(item, index) in search_history_arr" :key="index" style="position: relative;float: left;" >
					<!-- <view class="s_s_content_child" :class="{remove: item._remove}" @click="entranContent(index)"	>{{item.title}}</view> -->
					<view class="s_s_content_child"  @click="entranContent(index)"	>{{item.title}}</view>
					<!-- <view v-if="show_remove" style="position: absolute;right: 22rpx;">×</view> -->
					<!-- <text @click="remove_s(index)"  class="cell-icon yticon icon-shanchu4" style="font-size: 20rpx;position: absolute;right: 22rpx;top:12rpx"></text> -->
				</view>
				
			</view>
		</view>
		<view v-else class="bottom-box">
			
			<view v-if="loaded&&list.length==0" class="empty_data">暂无数据</view>
			<scroll-view v-else class="list-scroll-content" scroll-y @scrolltolower="getList">
				<view class="test">
					<water-fall ref="waterfallFlow" offset="20rpx" :list="list" @load="waterfallFlowLoad">
						<template v-slot:left="{leftList}">
							<view class="item-warter" v-for="(item, index) in leftList" :key="index"
								@click="e => clickItem(item)">
								<view class="image-text">
								<video v-if="item.video_url!=''" :src="item.video_url" :show-center-play-btn="false" :controls="false" style="width: 100%;height: 188rpx;border-radius: 20rpx;"></video>
								<image v-else mode="widthFix" class="big_image" :src="item.pics[0]" lazy-load="true"></image>
								
								
								<text v-if="item.video_url!=''" class="cell-icon yticon icon-player player_btn"></text>
								</view>
								<view class="user-info">
									<image class="small-image" :src="item.logo"></image>
									<view style="display: flex;flex: 1;">
										<view class="campus-name">{{item.campus_name}}</view>
										<view style="display: flex;margin-left: 10rpx;align-items: center;"><text class="cell-icon yticon icon-eye"></text><text class="eye-name">{{item.read_num}}</text></view>
									</view>
								</view>
								<view class="text-break-all">{{ item.title }}</view>
								<!-- <view class="coin-info">
									<view class="coin-detail">
										<view class="coin-num">{{item.score}}</view>
										<view class="coin-title">积分</view>
									</view>
									<view class="read-num">{{item.read_num}}人看过</view>
								</view> -->
							</view>
						</template>
						<template v-slot:right="{rightList}">
							<view class="item-warter" v-for="(item, index) in rightList" :key="index"
								@click="e => clickItem(item)">
								<view class="image-text">
								<video v-if="item.video_url!=''" :src="item.video_url" :show-center-play-btn="false" :controls="false" style="width: 100%;height: 188rpx;border-radius: 20rpx;"></video>
								<image v-else mode="widthFix" class="big_image" :src="item.pics[0]" lazy-load="true"></image>
								
								
								<text v-if="item.video_url!=''" class="cell-icon yticon icon-player player_btn"></text>
								</view>
								<view class="user-info">
									<image class="small-image" :src="item.logo"></image>
									<view style="display: flex;flex: 1;">
										<view class="campus-name">{{item.campus_name}}</view>
										<view style="display: flex;margin-left: 10rpx;align-items: center;"><text class="cell-icon yticon icon-eye"></text><text class="eye-name">{{item.read_num}}</text></view>
									</view>
								</view>
								<view class="text-break-all">{{ item.title }}</view>
								<!-- <view class="coin-info">
									<view class="coin-detail">
										<view class="coin-num">{{item.score}}</view>
										<view class="coin-title">积分</view>
									</view>
									<view class="read-num">{{item.read_num}}人看过</view>
								</view> -->
							</view>
						</template>
					</water-fall>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import DiyNav from "@/components/diy-nav-back"
	import Search from "@/components/search"
	import WaterFall from "@/components/waterfall"
	import empty from "@/components/empty";
	import Api from '@/common/api'
	export default {
		components: {
			DiyNav,
			Search,
			WaterFall,
			empty
		},
		data() {
			return {
				placeHolder:'请输入搜索关键词',
				show_remove:false,
				show:true,
				list: [], // PS: 直接写死在这里瀑布流并不会渲染，因为内部是watch监听渲染的，需要在其他地方被赋值，如onLoad
				count: 0,
				total:0,
				page:1,
				size:8,
				more_data:true,
				search_history_arr:[],
				_remove:false,
				search_val:'',
				loaded:false,
				lat:'',
				lng:''
			}
		},
		
		onLoad(option) {
			// this.getList()
			this.lat = option.lat;
			this.lng= option.lng;
			this.getHistory();
		},
		// 页面触底事件，加载下一页
		onReachBottom() {
			this.getList();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.list = [];
			/** 
			 * 数据被置空时，this.$refs.waterfallFlow.clear()方法是必须要调的
			 * 如果是强制渲染的场景请使用this.$refs.waterfallFlow.update(), 例如排序
			 * */
			this.$refs.waterfallFlow.clear();
		
			setTimeout(() => {
				this.getList();
				uni.stopPullDownRefresh();
			}, 500);
		},
		
		methods: {
			entranContent(index){
				// if(this.show_remove){
				// 	this.search_history_arr[index]._remove=!this.search_history_arr[index]._remove
				// }else{
				// 	let val =this.search_history_arr[index].title;
				// 	this.search_val=val;
				// 	this.$refs.searchBarRef.searchValue=val;
				// 	this.doConfirm(val)
				// }
				let val =this.search_history_arr[index].title;
				
				this.search_val=val;
				this.$refs.searchBarRef.searchValue=val;
				this.doConfirm(val)
				
			},
			cancelSearch(){
				this.show=true;
			},
			clickRemove(){
				// if(this.search_history_arr.length>0) this.show_remove=true;
				uni.removeStorage({
					key:'s_history'
				});
				this.search_history_arr=[]
			},
			saveHistory(value){
				var exists = this.checkValue(this.search_history_arr,'title', value);
				if(!exists&&value){
					this.search_history_arr.push({title:value,_remove:false});
					uni.setStorage({
						key:'s_history',
						data:this.search_history_arr
					})
				}
			},
			getHistory(){
				const _v =uni.getStorageSync('s_history');
				if(_v) this.search_history_arr = _v;
			},
			
			doConfirm(res){
				if(res.value||res.value=='') this.search_val=res.value;
				this.page=1;
				this.show=false;
				
				this.more_data=true;
				this.saveHistory(this.search_val)
				this.list =[];
				this.total=0;
				this.getList()
			},
			
			async getList() {
				
				if(!this.more_data){
					return;
				}
				
				let params = {
					page: this.page,
					size: this.size,
					key_word:this.search_val,
					lat:this.lat,
					lng:this.lng
				}
				let data = await Api.apiCall('get', Api.apiName.recommend_water, params,true);
				if(!data||data.data.list.length==0){
					this.loaded=true;
					return;
				}
				this.list = this.list.concat(data.data.list);
				this.loaded=true;
				this.total = data.data.total;
				if(data.data.list.length>0&&data.data.list.length==this.size){
					this.page++;
					this.more_data=true;
					return;
				}
				this.more_data=false;
				
			
			},			
			// 元素项被点击
			async clickItem(item) {
				uni.navigateTo({
					url: '/pages/course/detail?id=' + item.id+"&t=2"
				})
				return;
				// 可做页面跳转等
				// if(item.discover==''){
				// 	uni.navigateTo({
				// 		url: '/pages/course/detail?id=' + item.id+"&t=2"
				// 	})
				// }else{
				// 	uni.previewImage({
				// 		urls:[item.discover]
				// 	});
				// 	await Api.apiCall('get', Api.apiName.normal_detail, {r_id: item.id}, true);
				// }
			},
			// 瀑布流列表渲染完毕
			waterfallFlowLoad(event) {
				// console.log("渲染完成：", event);
			},
			checkValue(arr, key, value){
				for (let i = 0; i < arr.length; i++) {
				    if (arr[i][key] === value) {
				      return true;
				    }
				  }
				  return false;
			},
			remove_s(index){
				this.$api.msg(`121321`)
			},
		},

	}
</script>

<style lang='scss'>
	page {
		background: #fff;
	}
	.container{
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.header-top{
		height: 320rpx;
	}
	.bottom-box{
		flex: 1;
		width: 100%;
		overflow-y: auto;
	}
	.s_history{
		display: flex;
		align-items: center;
	}
	.s_stitle{
		display: flex;
		justify-content: flex-start;
		padding: 4rpx 20rpx;
	}
	.s_sicon{
		display: flex;
		justify-content: flex-end;
		flex: 1;
		padding-right: 20rpx;
	}
	.s_s_content{
		padding: 4rpx 20rpx;
	}
	.s_s_content_child{
		background: #EEEEEE;
		border-radius: 20rpx;
		margin: 10rpx 23rpx 10rpx 4rpx;
		float: left;
		padding: 20rpx 33rpx;
		font-size: 22rpx;
		color: #000000;
		text-align: center;
		font-weight: 800;
		opacity: 0.9;
		&.remove{
			background: #c9cae4 !important;
		}
		
	}
	
	::-webkit-scrollbar{
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}
	.uni-searchbar__box {
		border: 1px solid rgba(204, 204, 204, 0.5);
	}
	
	.list-scroll-content {
		height: 100%;
		/* position:fixed; */
		z-index:1
	}
	
	.item-warter {
		width: 100%;
		height: auto;
		/* background-color: #ffaaff; */
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;
		margin-bottom: 10rpx;
	}
	
	/* PS: 快手小程序不支持该选择器，在template中用js判断加上边距 */
	.item-warter:nth-child(n+2) {
		margin-top: 40rpx;
	}
	
	
	.big_image{
		width: 100%;
		border-radius: 20rpx;
	}
	
	.text-break-all {
		word-break: break-all;
		font-size: 14px;
		margin-top: 22rpx;
		font-weight: 800;
		padding-left: 10rpx;
	}
	.image-text{
		position: relative;
	}
	.player_btn{
		position: absolute;
		top:50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.small-image{
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 1px solid #ccc;
	}
	.user-info{
		display: flex;
		align-items: center;
	}
	.campus-name{
		margin-left: 10rpx;
		font-size: 12px;
		display: flex;
		flex: 1;
	}
	.coin-title{
		font-size: 10px;
		margin-top: auto;
		margin-left: 10rpx;
	}
	.coin-info{
		display: flex;
		justify-content: space-between;
		height: 40rpx;
		line-height: 40rpx;
		margin-top: 20rpx;
	}
	.coin-detail{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		color:#3085AD;
	}
	.read-num{
		margin-left: auto;
		color: #999999;
		font-size: 12px;
	}
	.coin-num{
		font-size: 10px;
		font-weight: 600;
	}
	.empty_data{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		opacity: 0.5;
		color: #999;
	}
	.eye-name{
		font-size: 22rpx;
		color:#ccc
	}
</style>